<script setup>
  // import { ref } from 'vue'
  // const SYSTEM_INFO=uni.getSystemInfoSync()
  // const statusBarHeight=ref(SYSTEM_INFO.statusBarHeight)
  
  
  // const {top,height}=uni.getMenuButtonBoundingClientRect()
  
  // const titleBarHeight=ref((top-statusBarHeight.value)*2+height) ||0
  
  // const b=statusBarHeight.value+titleBarHeight.value
  
  import {statusBarHeight} from '@/utils/system.js'
  import {getMenu} from '@/utils/system.js'
    import {b} from '@/utils/system.js'
</script>

<template>
  <view class="layout" >
   <view class="navbar">
     <view class="statusBar" :style="{height: statusBarHeight+'px'}"></view>
     <view class="titleBar" :style="{height:getMenu()+'px'}">
       <view class="title">推荐</view>
       <view class="search">
         <uni-icons type="search" size="24"></uni-icons>
         <text>搜索</text>
       </view>
     </view>
   </view>
   <view class="fill" :style="{height:b+'px'}">
     
   </view>
  </view>
</template>



<style scoped lang="scss">
.layout{
  .navbar{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
   background:
    linear-gradient(to bottom,transparent,#fff 400rpx),
    linear-gradient(to right,#beecd8 20% ,#F4E2D8);
    width: 100%;
    .titleBar{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 0 30rpx;
      .title{
        font-size: 22px;
        font-weight: 700;
        
      }
      .search{
        width: 220rpx;
        height: 50rpx;
        border-radius: 60rpx;
        background: rgba(255, 255, 255, 0.4);
        border: 1px solid #fff;
        margin-left: 30rpx;
        color: #999;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        text{
          padding-left: 10rpx;
        }
      }
    }
  }
}
</style>